<template>
	<view :class="[posterImageStatus ? 'noscroll product-con' : 'product-con']" v-show="domStatus">
		<product-con-swiper :imgUrls="imgUrls"></product-con-swiper>
		<view class="wrapper">
			<view class="share acea-row row-between row-bottom">
				<view class="money font-color-red">
					￥
					<text class="num" v-text="attr.productSelect.pinkPrice"></text>
					<text class="y-money" v-text="'￥' + storeInfo.productPrice"></text>
				</view>
			</view>
			<view class="introduce" v-text="storeInfo.title"></view>
			<view class="label acea-row row-between-wrapper">
				<view v-text="'类型:' + storeInfo.people + '人团'"></view>
				<view v-text="'库存:' + attr.productSelect.stock"></view>
				<!-- <view v-text="'已拼:' + storeInfo.sales"></view> -->
				<view v-text="'已拼:' + pinkOkSum"></view>
			</view>
		</view>
		<view class="notice acea-row row-middle">
			<view class="num font-color-red">
				<text class="iconfont icon-laba"></text>
				已拼{{ pinkOkSum
        }}{{ storeInfo.unitName }}
				<text class="line">|</text>
			</view>
			<view class="swiper-no-swiping swiper">
				<swiper class="swiper-wrapper" :options="swiperTip" :autoplay="true" :interval="3000">
					<block v-for="(item, itemNewIndex) in itemNew" :key="itemNewIndex">
						<swiper-item>
							<view class="line1">{{ item }}</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
		<view class="assemble">
			<view v-for="(item, groupListindex) in groupList" :key="groupListindex">
				<view class="item acea-row row-between-wrapper" v-if="groupListindex < groupListCount">
					<view class="pictxt acea-row row-between-wrapper">
						<view class="pictrue">
							<image :src="item.avatar" class="image" />
						</view>
						<view class="text line1" v-text="item.nickname"></view>
					</view>
					<view class="right acea-row row-middle">
						<view>
							<view class="lack">
								<text>还差</text>
								<text class="font-color-red" v-text="item.count"></text>
								<text>人成团</text>
							</view>
							<count-down :isDay="false" :tipText="'剩余 '" :dayText="false" :hourText="':'" :minuteText="':'" :secondText="false"
							 :datatime="item.stopTime"></count-down>
						</view>
						<view class="spellBnt" @click="groupRule(item.id)">
							去拼单
							<text class="iconfont icon-jiantou"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="more" v-if="groupList.length > groupListCount" @click="setGroupListCount">
				查看更多
				<text class="iconfont icon-xiangxia"></text>
			</view>
		</view>
		<view class="playWay">
			<view class="title acea-row row-between-wrapper">
				<view>拼团玩法</view>
			</view>
			<view class="way acea-row row-middle">
				<view class="item">
					<text class="num">①</text>开团/参团
				</view>
				<view class="iconfont icon-arrow"></view>
				<view class="item">
					<text class="num">②</text>邀请好友
				</view>
				<view class="iconfont icon-arrow"></view>
				<view class="item">
					<view>
						<text class="num">③</text>满员发货
					</view>
				</view>
			</view>
		</view>
		<!--选择规格-->
		<view class="attribute acea-row row-between-wrapper" @click="selecAttrTap">
			<view>
				<text>{{ attrTxt }}：</text>
				<text class="atterTxt">{{ attrValue }}</text>
			</view>
			<view class="iconfont icon-jiantou"></view>
		</view>
		<view class="userEvaluation">
			<view class="title acea-row row-between-wrapper">
				<view  v-if="replyCount==0" v-text="'用户评价'"></view>
				<view  v-text="'用户评价(' + replyCount + ')'" v-else></view>
				<view class="praise" @click="goReply">
					<text class="font-color-red" v-text="replyChance + '%'"></text>好评率
					<text class="iconfont icon-jiantou"></text>
				</view>
			</view>
			<UserEvaluation :reply="reply"></UserEvaluation>
		</view>
		<view class="product-intro">
			<view class="title">产品介绍</view>
			<view class="conter" style="white-space: pre-wrap;" v-html="storeInfo.description"></view>
			<!-- <view class="conter" v-html=""></view> -->
		</view>
		<view style="height:100rpx;"></view>
		<view class="footer-group acea-row row-between-wrapper" v-if="attr.productSelect.stock==0">
			<!-- <view class="customerSer acea-row row-center-wrapper row-column">
						<view class="iconfont icon-kefu"></view>
					<view>客服</view>
				</view>-->
			<view class="customerSer acea-row row-center-wrapper row-column" @click="setCollect">
				<view class="iconfont" :class="userCollect ? 'icon-shoucang1' : 'icon-shoucang'"></view>
				<text>收藏</text>
			</view>
			<view class="bnt xiang" >
				<text>已售空</text>
			</view>
		</view>
		<view class="footer-group acea-row row-between-wrapper" v-else>
			<view class="customerSer acea-row row-center-wrapper row-column" @click="setCollect">
				<view class="iconfont" :class="userCollect ? 'icon-shoucang1' : 'icon-shoucang'"></view>
				<text>收藏</text>
			</view>
			<view class="bnt bg-color-violet" @click="openAlone">单独购买</view>
			<view class="bnt bg-color-red" @click="openTeam">立即开团</view>
			
		</view>
		<ProductWindow v-if="cartNum" v-on:changeFun="changeFun" :attr="attr" :cartNum="cartNum"></ProductWindow>
		<StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus" :posterData="posterData"></StorePoster>
	</view>
</template>

<script>
	// import { swiper, swiperSlide } from "vue-awesome-swiper";

	import ProductConSwiper from "@/components/ProductConSwiper";
	import CountDown from "@/components/CountDown";
	import UserEvaluation from "@/components/UserEvaluation";
	import ProductWindow from "@/components/ProductWindows";
	import StorePoster from "@/components/StorePoster";
	import {
		getCombinationDetail
	} from "@/api/activity";
	import {
		postCartAdd
	} from "@/api/store";
	import {
		imageBase64
	} from "@/api/public";
	import {
		getCoupon,
		getCollectAdd,
		getCollectDel,
		getUserInfo
	} from "@/api/user";
	const NAME = "GroupDetails";

	export default {
		name: "GroupDetails",
		components: {
			ProductConSwiper,
			CountDown,
			UserEvaluation,
			// swiper,
			// swiperSlide,
			ProductWindow,
			StorePoster
		},
		props: {},
		data: function() {
			return {
				domStatus: false,
				posterData: {
					image: "",
					title: "",
					price: "",
					code: ""
				},
				isOpen: false,
				productValue: [],
				pinkOkSum:0,
				posterImageStatus: false,
				reply: [],
				replyCount: 0,
				replyChance: 0,
				imgUrls: [],
				storeInfo: {},
				itemNew: {},
				groupListCount: 2,
				groupList: {},
				attrTxt: "请选择",
				attrValue: "",
				swiperTip: {
					direction: "vertical",
					autoplay: {
						disableOnInteraction: false,
						delay: 2000
					},
					loop: true,
					speed: 1000,
					observer: true,
					observeParents: true
				},
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {}
				},
				//       attr: {
				//         cartAttr: false,
				//         productSelect: {
				//           image: "",
				//           store_name: "",
				//           price: "",
				//           stock: "",
				//           unique: "",
				//           cart_num: 1
				//         }
				//       },
				cartNum: 1,
				userCollect: false
			};
		},
		watch: {
			$yroute: function(n) {
				var that = this;
				if (n.name === NAME) {
					that.mountedStart();
				}
			}
		},
		onShow: function() {
			this.mountedStart();
		},
		methods: {
			openAlone: function() {
				this.$yrouter.replace({
					path: '/pages/shop/GoodsCon/index',
					query: {
						id: this.storeInfo.productId
					}
				});
				//this.$yrouter.replace({ path: "/detail/" + this.storeInfo.productId });
			},
			//收藏商品
			setCollect: function() {
				let that = this,
					id = that.storeInfo.productId,
					category = "product";

				if (that.userCollect) {

					getCollectDel(id, category).then(function() {
						that.userCollect = !that.userCollect;
						that.mountedStart();
					});
				} else {

					getCollectAdd(id, category).then(function() {
						that.userCollect = !that.userCollect;

						that.mountedStart();
					});
				}
			},
			mountedStart: function() {
				var that = this;
				let id = that.$yroute.query.id;
				getCombinationDetail(id).then(res => {
					that.userCollect = res.data.userCollect;
					// console.log("拼团销量"+JSON.stringify(res.data))
					that.$set(that, "storeInfo", res.data.storeInfo);
					that.$set(that, "pinkOkSum", res.data.pinkOkSum);
					
					// 给 attr 赋值，将请求回来的规格赋值给 attr
					that.$set(that.attr, "productAttr", res.data.productAttr);
					that.$set(that, "productValue", res.data.productValue);

					that.$set(that, "imgUrls", res.data.storeInfo.sliderImageArr);
					that.$set(that, "itemNew", res.data.pinkOkList);
					that.$set(that, "groupList", res.data.pink);
					that.$set(that, "reply", [res.data.reply]);
					that.$set(that, "replyCount", res.data.replyCount);
					if(res.data.replyCount==0){
						that.$set(that, "replyChance", 100);
					}else{
						that.$set(that, "replyChance", res.data.replyChance);
					}
					
					that.setProductSelect();
					that.posterData.image = that.storeInfo.image;
					if (that.storeInfo.title.length > 30) {
						that.posterData.title = that.storeInfo.title.substring(0, 30) + "...";
					} else {
						that.posterData.title = that.storeInfo.title;
					}
					that.posterData.price = that.storeInfo.price;
					that.posterData.code = that.storeInfo.code_base;
					that.domStatus = true;
					that.DefaultSelect();
					//that.getImageBase64();
				});
			},
			getImageBase64: function() {
				let that = this;
				imageBase64(this.posterData.image, that.posterData.code).then(res => {
					that.posterData.image = res.data.image;
					that.posterData.code = res.data.code;
				});
			},
			setPosterImageStatus: function() {
				// var sTop = document.body || document.documentElement;
				// sTop.scrollTop = 0;
				this.posterImageStatus = !this.posterImageStatus;
			},
			groupRule: function(id) {
				let pinkPrice = this.attr.productSelect.pinkPrice;
				var that = this;
				that.$yrouter.push({
					path: "/pages/activity/GroupRule/index",
					query: {
						id:id,
						pinkPrice:pinkPrice
					}
				});
			},
			goReply: function() {
				var that = this;
				that.$yrouter.push({
					path: "/pages/shop/EvaluateList/index",
					query: {
						id: that.storeInfo.productId
					}
				});
			},
			setGroupListCount: function() {
				this.groupListCount = this.groupListCount + 2;
			},
			//将父级向子集多次传送的函数合二为一；
			changeFun: function(opt) {
				if (typeof opt !== "object") opt = {};
				let action = opt.action || "";
				let value = opt.value === undefined ? "" : opt.value;
				this[action] && this[action](value);
			},
			//打开属性插件；
			selecAttrTap: function() {
				this.attr.cartAttr = true;
				//this.isOpen = true;
				this.isOpen = true;
			},
			//默认属性
			DefaultSelect: function() {
				let productAttr = this.attr.productAttr;
				let value = [];
				for (let i = 0; i < productAttr.length; i++) {
					this.$set(productAttr[i], "index", 0);
					value.push(productAttr[i].attrValueArr[0]);
				}
				console.log("value值是啥" + JSON.stringify(value));
				//sort();排序函数:数字-英文-汉字；
				let productSelect = this.productValue[value.sort().join(",")];
				//let productSelect = this.productValue;
				if (productSelect && productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.storeInfo.storeName
					);
					this.$set(this.attr.productSelect, "image", productSelect.image);
					this.$set(this.attr.productSelect, "pinkPrice", productSelect.pinkPrice);
					this.$set(this.attr.productSelect, "stock", productSelect.stock);
					this.$set(this.attr.productSelect, "unique", productSelect.unique);
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", value.sort().join(","));
					this.$set(this, "attrTxt", "已选择");
				} else if (!productSelect && productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.storeInfo.storeName
					);
					this.$set(this.attr.productSelect, "image", this.storeInfo.image);
					this.$set(this.attr.productSelect, "pinkPrice", this.storeInfo.pinkPrice);
					this.$set(this.attr.productSelect, "stock", 0);
					this.$set(this.attr.productSelect, "unique", "");
					this.$set(this.attr.productSelect, "cart_num", 0);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", "请选择");
				} else if (!productSelect && !productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.storeInfo.storeName
					);
					this.$set(this.attr.productSelect, "image", this.storeInfo.image);
					this.$set(this.attr.productSelect, "pinkPrice", this.storeInfo.pinkPrice);
					this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
					this.$set(
						this.attr.productSelect,
						"unique",
						this.storeInfo.unique || ""
					);
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", "请选择");
				}
			},
			changeattr: function(res) {
				var that = this;
				that.attr.cartAttr = res;
			},
			//选择属性；
			ChangeAttr: function(res) {

				// 修改了规格
				let productSelect = this.productValue[res.value];
				if (productSelect) {
					this.attr.productAttr[res.indexw].index = res.indexn;
					this.$set(this.attr.productSelect, "image", productSelect.image);
					this.$set(this.attr.productSelect, "pinkPrice", productSelect.pinkPrice);
					this.$set(this.attr.productSelect, "stock", productSelect.stock);
					this.$set(this.attr.productSelect, "unique", productSelect.unique);
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", res.value);
					this.$set(this, "attrTxt", "已选择");
				}else if (productSelect==undefined){
					uni.showToast({
					  title: "没有"+res.value+"的商品，请选择其它",
					  icon: "none",
					  duration: 2000
					});
				} else {
					this.$set(this.attr.productSelect, "image", this.storeInfo.image);
					this.$set(this.attr.productSelect, "pinkPrice", this.storeInfo.pinkPrice);
					this.$set(this.attr.productSelect, "stock", 0);
					this.$set(this.attr.productSelect, "unique", "");
					this.$set(this.attr.productSelect, "cart_num", 0);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", "请选择");
				}
			},
			ChangeCartNum: function(res) {
				var that = this;
				that.attr.productSelect.cart_num = 1;
				that.cartNum = 1;
				uni.showToast({
					title: "每人每次限购1" + that.storeInfo.unitName,
					icon: "none",
					duration: 2000
				});
			},
			setProductSelect: function() {
				var that = this;
				var attr = that.attr;
				attr.productSelect.image = that.storeInfo.image;
				attr.productSelect.store_name = that.storeInfo.title;
				attr.productSelect.price = that.storeInfo.price;
				attr.productSelect.stock = that.storeInfo.stock;
				attr.cartAttr = false;
				that.$set(that, "attr", attr);
			},
			openTeam: function() {
				var that = this;
				if (that.attr.cartAttr == false) {
					that.attr.cartAttr = !this.attr.cartAttr;
				} else {
					var obj=new Date();
					var time = obj.getTime()/1000;
					
					//当前时间小于结束时间
					if(time < this.storeInfo.stopTime){
						var data = {};
						data.productId = that.storeInfo.productId;
						data.cartNum = that.attr.productSelect.cart_num;
						data.uniqueId = that.attr.productSelect.unique;
						data.combinationId = that.storeInfo.id;
						data.new = 1;
						postCartAdd(data)
							.then(res => {
								that.$yrouter.push({
									path: "/pages/order/OrderSubmission/index",
									query: {
										id: res.data.cartId
									}
								});
							})
							.catch(err => {
								uni.showToast({
									title: err.msg || err.response.data.msg,
									icon: "none",
									duration: 2000
								});
							});
					}else{
						uni.showToast({
						  title: "商品已结束，请刷新",
						  icon: "none",
						  duration: 2000
						});
					}
					
				}
			}
		}
	};
</script>
<style scoped lang="less">
	.product-con .wrapper {
		padding-bottom: 0.26 * 100rpx;
	}

	.noscroll {
		height: 100%;
		overflow: hidden;
	}

	.product-con .footer-group .bnt {
		// flex:1;
		width: 43%;
	}

	.product-con .footer-group .bnt.bg-color-violet {
		background-color: #fa8013;
	}
	
	.product-con .footer-group .bnt.xiang {
		background-color:  #555555;
		width: 86%;
	}
</style>
